<template>
  <div class="add">
    <header>
      <span @click="backFn">
        <van-icon name="arrow-left" />
      </span>
      <flot>个人签约</flot>
      <span></span>
    </header>
    <section>
      <p>客户经理</p>
      <div class="child">
        <div class="left">
          <div class="user_img">s</div>
          <div class="boxp">
            <p>system</p>
            <p>国邦盛世</p>
          </div>
        </div>
        <div class="right">
          <van-icon name="phone-o" />
        </div>
      </div>
      <div class="p" @click="check_user">
        <p>*客户</p>
        <input
          type="text"
          v-model="add_user.value.name"
          placeholder="请选择客户"
        />
      </div>
      <div class="p" @click="check_product">
        <p>*产品</p>
        <input
          type="text"
          v-model="add_user.value.name"
          placeholder="请选择产品"
        />
      </div>
      <div class="p">
        <p>*合同号</p>
        <input
          type="text"
          v-model="add_user.value.name"
          placeholder="请输入合同号"
        />
      </div>
      <div class="p">
        <p>*客户银行卡</p>
        <input
          type="text"
          v-model="add_user.value.name"
          placeholder="请选择客户银行卡"
        />
      </div>
      <div class="p">
        <p>*合同金额（万）</p>
        <input
          type="text"
          v-model="add_user.value.money"
          placeholder="请输入合同金额"
        />
      </div>
      <div class="p">
        <p>*签约日期</p>
        <input
          type="text"
          v-model="add_user.value.sign_time"
          placeholder="请输入签约日期"
        />
      </div>
      <div class="p">
        <p>*起收益日期</p>
        <input
          type="text"
          v-model="add_user.value.valid_time"
          placeholder="请输入起收益日期"
        />
      </div>
      <div class="p">
        <p>*支付方式</p>
        <van-radio-group v-model="checked" direction="horizontal">
          <van-radio name="1">常规</van-radio>
          <van-radio name="2">通联</van-radio>
        </van-radio-group>
      </div>
      <div class="p">
        <p>*付款方式</p>
        <van-radio-group v-model="checked" direction="horizontal">
          <van-radio name="1">银行转账</van-radio>
          <van-radio name="2">POS刷卡</van-radio>
          <van-radio name="2">转存</van-radio>
        </van-radio-group>
      </div>
      <div class="p" @click="check_user">
        <p>*到账公户</p>
        <input
          type="text"
          v-model="add_user.value.name"
          placeholder="请选择到账公户"
        />
      </div>
      <div class="p" @click="check_user">
        <p>*金额（万元）</p>
        <input
          type="text"
          v-model="add_user.value.money"
          placeholder="请输入金额"
        />
      </div>
      <div class="p" @click="check_user">
        <p>*手续费</p>
        <input
          type="text"
          v-model="add_user.value.name"
          placeholder="请输入手续费"
        />
      </div>

      <div class="p">
        <p>支付凭证</p>
        <input type="text" placeholder="请输入支付凭证" />
      </div>
      <div class="p">
        <p>合同资料</p>
        <input type="text" placeholder="请输入合同资料" />
      </div>
      <div class="p">
        <p>其他资料</p>
        <input type="text" placeholder="请输入其他资料" />
      </div>
      <div class="p">
        <p>其他附件</p>
        <input type="text" placeholder="请输入其他附件" />
      </div>
    </section>
    <footer>
      <van-button @click="submitFn" round type="primary" block>提交</van-button>
    </footer>
  </div>
  <van-area
    v-show="date"
    @cancel="cancelFn"
    @confirm="sureFn"
    title="标题"
    :area-list="areaList"
  />

  <van-cell is-link title="基础用法" @click="show = true" />
  <van-action-sheet
    v-model:show="show"
    :actions="user_list.value"
    @select="onSelect"
  />
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import apis from "../../../utils/api_nots";
import { Toast } from "vant";
import { useRouter, useRoute } from "vue-router";

const add_user = reactive({
  value: {
    bank_card_id: 37327,
    contract_no: "143",
    file_list: "",
    image_ids: [],
    investment_way: "1",
    order_money: "",
    pay_list: [
      { pay_type: "1", families_id: "", money: -10000, course_money: "" },
    ],
    course_money: "",
    families_id: "",
    money: "",
    pay_type: "1",
    product_id: 1078,
    sign_time: "",
    user_id: 26560,
    valid_time: "",
    worker_id: 17,
  },
});
const router = useRouter();
const route = useRoute();
const list = reactive({ value: [] });
const checked = ref("1");
const date = ref(false);
const checked_age = ref("1");
const user_img = ref("");
const user_img1 = ref("");
const areaList = {
  province_list: {
    110000: "北京市",
    120000: "天津市",
  },
  city_list: {
    110100: "北京市",
    120100: "天津市",
  },
  county_list: {
    110101: "东城区",
    110102: "西城区",
    // ....
  },
};
const user_list = reactive({ value: [] });
const product_list = reactive({ value: [] });
const show = ref(false);
const onSelect = (item) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show.value = false;
  Toast(item.name);
};
// 点击选择客服
function check_user() {
  show.value = true;

  apis
    .get_user({
      page: 1,
      size: 20,
      worker_id: 17,
    })
    .then((res) => {
      user_list.value = res.data.data.data;
    });
}
// 点击选择产品
function check_product() {
  console.log(1);
  apis
    .get_pros({
      page: 1,
      size: 200,
      state: 1,
      wx_xcx_status: 1,
    })
    .then((res) => {
      product_list.value = res.data.data.data;
      console.log(res.data.data.data);
    });
}

// 点击提交
function submitFn() {
  apis
    .edit_user(add_user.value)
    .then((res) => {
      console.log(res);
      // Toast("添加成功");
      // history.go(-1);
      // if (res.status == 200) {
      // } else {
      //   Toast(res.data.msg);
      // }
    })
    .catch((rej) => {
      console.log(rej);
    });
}

onMounted(() => {
  apis
    .get_user({
      size: 20,
      page: 1,
      state: 1,
      wx_xcx_status: 1,
    })
    .then((res) => {
      if (route.query.id != undefined) {
        res.data.data.data.forEach((v) => {
          if (v.id == route.query.id) {
            add_user.value = v;
            console.log(v);
          }
        });
      }
    });
});

function cancelFn(v) {
  date.value = false;
}
// 点击确定
function sureFn(v) {
  console.log(v);
  date.value = false;
}
// 点击选择省市区
function dateFn() {
  date.value = true;
}
// 点击上传图片
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  apis.update(file).then((res) => {
    console.log(res.data.data);
  });
  user_img.value = file.content;
};
// 点击上传图片
const afterRead1 = (file) => {
  // 此时可以自行将文件上传至服务器
  apis.update(file).then((res) => {
    console.log(res.data.data);
  });
  user_img1.value = file.content;
};

function backFn() {
  history.go(-1);
}
</script>

<style scoped>
.p img {
  width: 200px;
  height: 100px;
}
.van-area {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.p {
  box-sizing: border-box;
  padding: 0.53rem;
  border-top: 0.5rem solid #eee;
}
.p input {
  width: 100%;
  border: none;
}
.add {
  display: flex;
  flex-direction: column;
}
.right {
  font-size: 2rem;
}
footer dl {
  text-align: center;
  font-size: 1rem;
}
.user_img {
  width: 1rem;
  height: 1rem;
  background: blueviolet;
  color: white;
  padding: 1rem;
  font-size: 1.5rem;
  line-height: 1rem;
  border-radius: 50%;
}
.child {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  display: flex;
  align-items: center;
  height: 100%;
}
.top {
  background: rgb(222, 204, 255);
  color: blue;
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  position: fixed;
  top: 2.3rem;
  z-index: 100;
}
footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 3rem;
  background: white;
  z-index: 100;
}
section {
  padding: 2.3rem 0 3rem 0;
  overflow: auto;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 2.3rem;
  background: blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 100;
}
header span {
  width: 1.3rem;
  font-size: 1.3rem;
}
</style>
